<template>
  <div class="app-container">
    <el-row style="border-bottom:4px solid #e8ecf7;padding-bottom: 40px;">
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">收入</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #2b89df;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">今天</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{ratioDataMap.payment == null ? 0 : ratioDataMap.payment}}元</div>
          <div style="padding:0 10px;overflow:hidden;font-size: 14px;">
            <div style="float: left;">占总比收入</div>
            <div style="float:right;text-align:right;color: #2c8adf;">{{this.ratioDataMap.totalPayment}}%⚕</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">订单数</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #53c8e0;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">今天</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{ratioDataMap.orderNum}}单</div>
          <div style="padding:0 10px;overflow:hidden;font-size: 14px;">
            <div style="float: left;">占总订单</div>
            <div style="float:right;text-align:right;color: #53c8e0;">{{this.ratioDataMap.totalOrderNum}}%⚕</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">访客统计</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #4db4b4;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">今天</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{ratioDataMap.visitNum}}人</div>
          <div style="padding:0 10px;overflow:hidden;font-size: 14px;">
            <div style="float: left;">占总访客</div>
            <div style="float:right;text-align:right;color: #4db4b4;">{{this.ratioDataMap.totalVisitNum}}%⚕</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-right:10px;border-top:4px solid #e8ecf7;">
          <div style="padding:10px;overflow:hidden;border-bottom:1px solid #eaedf8;">
            <div style="float: left;">在线收款总额</div>
            <div style="float:right;text-align:right;color: #fff;background-color: #ed587d;width: 50px;height: 24px;font-size:14px;line-height: 24px;text-align: center;border-radius: 2px;">今天</div>
          </div>
          <div style="padding:10px; font-size: 26px;">{{ratioDataMap.onlinePayment == null ? 0 : ratioDataMap.onlinePayment}}元</div>
          <div style="padding:0 10px;overflow:hidden;font-size: 14px;">
            <div style="float: left;">占总收入</div>
            <div style="float:right;text-align:right;color: #ed587d;">{{this.ratioDataMap.totalOnlinePayment}}%⚕</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="clearfix" style="border-top:4px solid #e8ecf7;margin-top: 30px;padding: 10px;">
      <div class="fl" style="line-height:35px;">数据统计</div>
      <el-button class="fr" style="margin-left:10px" @click="seachData" type="success">搜索</el-button>
      <div class="fr">
        <el-date-picker
          v-model="value1"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="fr" style="line-height:35px;margin-right: 10px;">时间范围 </div>
    </div>
    <el-row style="color:#616980;">
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>总收入</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.totalPayment == null ? 0 : this.dataStatistics.totalPayment}}元</div>
      </el-col>
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>在线收入</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.onlinePayment == null ? 0 : this.dataStatistics.onlinePayment}}元</div>
      </el-col>
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>现金支付</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.cash == null ? 0 :this.dataStatistics.cash}}元</div>
      </el-col>
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>总订单数</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.orderNum}}单</div>
      </el-col>
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>商品数</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.goodsNum}}个</div>
      </el-col>
      <!--      <el-col :span="3" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">-->
      <!--        <div>打印机数</div>-->
      <!--        <div style="font-size:26px;font-weight:bold;line-height:40px">0台</div>-->
      <!--      </el-col>-->
      <el-col :span="4" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">
        <div>餐桌数</div>
        <div style="font-size:26px;font-weight:bold;line-height:40px">{{this.dataStatistics.tableNum}}张</div>
      </el-col>
      <!--      <el-col :span="3" style="text-align:center;border:1px solid #e8ecf7;padding: 20px 0;">-->
      <!--        <div>用户人数</div>-->
      <!--        <div style="font-size:26px;font-weight:bold;line-height:40px;">0人</div>-->
      <!--      </el-col>-->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div style="border-bottom:1px solid #e8ecf7;line-height: 40px;margin: 15px;">订单类型比例图</div>
        <div id="orderType" style="width:400px; height:400px"></div>
      </el-col>
      <el-col :span="12">
        <div style="border-bottom:1px solid #e8ecf7;line-height: 40px;margin: 15px;">支付方式比例图</div>
        <div id="payType" style="width:400px; height:400px"></div>
      </el-col>
    </el-row>
    <div style="background:#f2f2f2; padding: 10px;">
      <el-row :gutter="20" >
        <el-col :span="6" style="">
          <div style="line-height:30px; margin-top:10px;height:30px;">退款﹠订单</div>
          <div style="background:#fff">
            <p style="line-height: 40px;padding-top: 20px;text-align:center">退款金额（元）</p>
            <p style="text-align:center;font-size:24px;color:#b32b3c;padding-bottom:50px">{{this.ratioDataMap.refundPayment == null? 0:this.ratioDataMap.refundPayment}}</p>
          </div>
        </el-col>
        <el-col :span="6" style="">
          <div style="line-height:30px; margin-top:10px;height:30px;"></div>
          <div style="background:#fff">
            <p style="line-height: 40px;padding-top: 20px;text-align:center">退款订单（个）</p>
            <p style="text-align:center;font-size:24px;color:#b32b3c;padding-bottom:50px">{{this.ratioDataMap.refundOrderNum}}</p>
          </div>
        </el-col>
        <el-col :span="6" style="">
          <div style="line-height:30px; margin-top:10px;height:30px;">免单﹠订单</div>
          <div style="background:#fff">
            <p style="line-height: 40px;padding-top: 20px;text-align:center">免单金额（元）</p>
            <p style="text-align:center;font-size:24px;color:#b32b3c;padding-bottom:50px">{{ this.ratioDataMap.freePayment == null ? 0 : this.ratioDataMap.freePayment }}</p>
          </div>
        </el-col>
        <el-col :span="6" style="">
          <div style="line-height:30px; margin-top:10px;height:30px;"></div>
          <div style="background:#fff">
            <p style="line-height: 40px;padding-top: 20px;text-align:center">免单订单（个）</p>
            <p style="text-align:center;font-size:24px;color:#b32b3c;padding-bottom:50px">{{ this.ratioDataMap.freeOrderNum }}</p>
          </div>
        </el-col>
      </el-row>
      <div style="line-height:40px;border-bottom:1px solid #d7d7d7;">菜品销量</div>
      <div style="width:100%; height:500px;" id="menuNum"></div>
    </div>


  </div>
</template>
<style>
.fl{
  float: left;
}
.fr{
  float: right;
}
.clearfix:after{
  content: '';
  display: block；
  clear： both；
}
</style>
<script>

export default {
  name: "DataCount",
  dicts: ['sys_yes_no'],
  data() {
    return {
      reportGoodsTitle:[],
      reportGoodsData:[],
      ratioDataMap:{},
      orderTypeList:[],
      payTypeList:{
        dataList:[],
        titleDataList:[]
      },
      dataStatistics:{},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [],
      value2: '',
      // 遮罩层
      orderData: [ ],
      payData: [ ],

    };
  },
  created() {
    this.initDate();
  },
  mounted(){
    this.getData();

  },
  methods: {
    initDate(){
      let nowTimes = new Date();
      nowTimes.setTime(nowTimes.getTime() + 24 * 60 * 60 * 1000);
      let oldTimes = nowTimes - (86400000 * 30);
      let oldDate = this.getDate(oldTimes); //一个月前的时间
      let nowDate = this.getDate(nowTimes);//今天的时间
      this.value1 = [oldDate, nowDate];
      this.endDate = nowDate;
      this.startDate = oldDate;

    },
    //格式化时间 返回年月日
    getDate(time) {
      if (time) {
        let val = new Date(time);
        let Y = val.getFullYear();
        let M = (val.getMonth() + 1) < 10 ? '0' + (val.getMonth() + 1) : (val.getMonth() + 1);
        let D = val.getDate() < 10 ? '0' + val.getDate() : val.getDate();
        let h = val.getHours() < 10 ? '0' + val.getHours() : val.getHours();
        let m = val.getMinutes() < 10 ? '0' + val.getMinutes() : val.getMinutes();
        return Y + '-' + M + '-' + D;
      }
      return ''
    },
    //获取各类报表数据
    getData(){
      this.getDataMarket1();
      this.getDataMarket2();

    },

    getDataMarket1(){
      dataMarket1({}).then(response => {
        console.log(response.data)
        this.orderTypeList = response.data.orderTypeList;
        this.payTypeList = response.data.payTypeList;
        this.ratioDataMap = response.data.ratioDataMap;
        //今日 收入
        if(this.ratioDataMap.totalPayment !=null && this.ratioDataMap.payment != null){
          if(this.ratioDataMap.payment > 0 && this.ratioDataMap.totalPayment>0){
            this.ratioDataMap.totalPayment = (this.ratioDataMap.payment/this.ratioDataMap.totalPayment)*100
          }
        }
        if(this.ratioDataMap.totalPayment == null){
          this.ratioDataMap.totalPayment = 0
        }

        //今日 订单数
        if(this.ratioDataMap.orderNum !=null && this.ratioDataMap.totalOrderNum != null){
          if(this.ratioDataMap.orderNum > 0 && this.ratioDataMap.totalOrderNum>0){
            this.ratioDataMap.totalOrderNum = (this.ratioDataMap.orderNum/this.ratioDataMap.totalOrderNum)*100
          }
        }
        if(this.ratioDataMap.totalOrderNum == null){
          this.ratioDataMap.totalOrderNum = 0
        }

        //今日 访客统计
        if(this.ratioDataMap.visitNum !=null && this.ratioDataMap.totalVisitNum != null){
          if(this.ratioDataMap.visitNum > 0 && this.ratioDataMap.totalVisitNum>0){
            this.ratioDataMap.totalVisitNum = (this.ratioDataMap.visitNum/this.ratioDataMap.totalVisitNum)*100
          }
        }

        if(this.ratioDataMap.totalVisitNum  == null){
          this.ratioDataMap.totalVisitNum = 0
        }

        //今日 在线收款总额
        if(this.ratioDataMap.onlinePayment !=null && this.ratioDataMap.totalOnlinePayment != null){
          if(this.ratioDataMap.onlinePayment > 0 && this.ratioDataMap.totalOnlinePayment>0){
            this.ratioDataMap.totalOnlinePayment = (this.ratioDataMap.onlinePayment/this.ratioDataMap.totalOnlinePayment)*100
          }
        }
        if(this.ratioDataMap.totalOnlinePayment == null){
          this.ratioDataMap.totalOnlinePayment = 0
        }
        this.orderData = this.orderTypeList;
        this.payData = this.payTypeList;
        this.reportGoodsTitle = response.data.goodsInfo.titleDataList
        this.reportGoodsData = response.data.goodsInfo.dataList
        console.log(this.reportGoodsTitle)
        console.log(this.reportGoodsData)
        //初始化报表信息
        this.orderInt();
        this.payInt();
        this.menuInt();

      });
    },
    seachData(){
      this.getDataMarket2()
    },
    getDataMarket2(){
      var date = this.value1
      console.log(this.value1)
      dataMarket2({startDate:this.value1[0],endDate:this.value1[1]}).then(response => {
        this.dataStatistics = response.data;
      });
    },

    orderInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("orderType"));
      var option;
      option = {
        title: {
          text: '各种支付类型比例',
          subtext: '比例图',
          left: 'center'
        },
        color:[
          '#f17e4e',
          '#87cefa',
          '#da70d6',
          '#60ce35',
          '#000'
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '支付类型',
            type: 'pie',
            radius: '50%',
            data:this.orderData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      echartsDiv.setOption(option);
    },
    payInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("payType"));
      var option;

      option = {
        title: {
          text: '各种支付方式收入比例',
          subtext: '比例图',
          left: 'center'
        },
        color:[
          '#f17e4e',
          '#87cefa',
          '#da70d6',
          '#60ce35',
          '#8400ff'
        ],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '支付方式',
            type: 'pie',
            radius: '50%',
            data:this.payData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      echartsDiv.setOption(option);
    },
    menuInt(){
      var echartsDiv = this.$echarts.init(document.getElementById("menuNum"));
      var option;
      option = {
        xAxis: {
          type: 'category',
          data:  this.reportGoodsTitle
        },
        color:[
          '#04cfd6',
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  this.reportGoodsData,
            type: 'bar'
          }
        ]
      };
      echartsDiv.setOption(option);
    },
  }
};
</script>
